<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        .title {
            line-height: 40px;
            height: 40px;
            text-indent: 10px;
        }

        .list li {
            text-indent: 10px;
            line-height: 40px;
            height: 40px;
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="title">
            <button>删除</button>
            <button>删除</button>
        </div>
        <ul class="list">
            <li class="first"><span class="demo">01</span></li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
        <input type="text" class="search">
    </div>
</body>
<script>

    // 插入同级

    // $(ele).remove()  删除匹配的元素   这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
    // $(ele).detach()  删除匹配的元素   这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。




    $(".list li").click(function () {
        console.log($(this).index());
    })


    $("button").eq(0).click(function () {
        var $ele = $(".mid").remove();
        setTimeout(() => {
            $ele.insertAfter($(".list li").eq(1))
        }, 2000);
    })

    $("button").eq(1).click(function () {
        var $ele = $(".mid").detach();
        setTimeout(() => {
            $ele.insertAfter($(".list li").eq(1))
        }, 2000);
    })




</script>


</html>